<template>
	<view>
		<button @click="onSetTimeout()" type='primary'>单次计时器</button>
		<button @click="onSetTimeCallxy(userName,password)" type='default'>带参数setTimeout</button>
		<button @click="onTimeoutClear()" type="warn">取消定时器</button>
		<button @click="onInteral()" type="primary">周期打印</button>
		<button @click="onClearInter()" type="warn" plain="true">取消周期打印</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: 'ljq',
				password: '018',
				timeoutID: null,
				count: 0,
				interalID: null
			}
		},
		methods: {
			onSetTimeout() {
				console.log("onSetTimeCall-->");
				this.timeoutID = setTimeout(() => {
					console.log("延迟三秒后才会打印");
				}, 3000)
			},
			onSetTimeCallxy(n, p) {
				console.log("onSetTimeCallxy(userName,password)" + n + p);
				setTimeout((x, y) => {
					console.log("这是传入参数的调用" + n + p);
				}, 2000, n, p)
			},
			onTimeoutClear() {
				console.log("onTimeoutClear()--取消定时器" + this.timeoutID);
				clearTimeout(this.timeoutID);
			},
			onInteral() {
				this.interalID=setInterval(() => {
					this.count++;
					console.log("周期打印 count", this.count);
				}, 1000)
			},
           onClearInter() {
           	console.log("onClearInter:", this.interalID);
           	clearInterval(this.interalID)
           }

		}
	}
</script>

<style>
	button {
		margin: 20rpx;
	}
</style>